<template>
	<view class="content">
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">收件人</view>
				<input placeholder="收件人性名" name="input"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">所在地区</view>
				<picker mode="multiSelector" @change="RegionChange" :value="region" :range="[['aaa','bbb']]">
					<view class="picker">
						{{region[0]}}，{{region[1]}}，{{region[2]}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">收货地址</view>
				<input placeholder="输入详细收货地址" name="input"></input>
				<text class='icon-locationfill text-orange'></text>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input placeholder="输入手机号码" name="input"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">默认地址</view>
				<switch class='orange radius' @change="SwitchD" :class="switchD?'checked':''" :checked="switchD?true:false"></switch>
			</view>
			
			<view class="cu-form-group p15">
				<button class="cu-btn lg w-100">提交保存</button>
			</view>

		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				region: ['广东省', '广州市', '海珠区'],
				switchD: false,
			};
		},
		methods: {
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			RegionChange(e) {
				this.region = e.detail.value
			},
			SwitchD(e) {
				this.switchD = e.detail.value
			},
		}
	}
</script>

<style lang='scss'>
page { background:$bgcolor_white; }
.w-100 { width:100%; background:$vui_bgcolor; color:$bgcolor_white; }
.p15 { padding:30upx; }
</style>